<template>
  <view class="message-detail-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont">&#xe697;</text>
      </view>
      <view class="title">
        <text>消息详情</text>
      </view>
      <view class="right-btn" @tap="deleteMessage">
        <text class="iconfont">&#xe6e4;</text>
      </view>
    </view>
    
    <!-- 消息内容 -->
    <scroll-view class="message-content" scroll-y="true">
      <view v-if="loading" class="loading-state">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="!message" class="error-state">
        <view class="error-icon">
          <text class="iconfont">&#xe65e;</text>
        </view>
        <text class="error-text">消息不存在或已被删除</text>
        <view class="back-to-list" @tap="goToMessageList">
          <text>返回消息列表</text>
        </view>
      </view>
      
      <view v-else class="message-container">
        <view class="message-header">
          <view class="message-title">{{ message.title }}</view>
          <view class="message-info">
            <text class="sender">{{ message.sender }}</text>
            <text class="time">{{ message.time }}</text>
          </view>
        </view>
        
        <view class="message-body">
          <rich-text :nodes="message.content"></rich-text>
        </view>
        
        <view v-if="message.hasAttachment" class="message-attachments">
          <view class="attachment-title">
            <text>附件</text>
          </view>
          
          <view 
            v-for="(attachment, index) in message.attachments" 
            :key="index" 
            class="attachment-item"
            @tap="viewAttachment(attachment)"
          >
            <view class="attachment-icon">
              <text class="iconfont">&#xe6f3;</text>
            </view>
            <view class="attachment-info">
              <text class="attachment-name">{{ attachment.name }}</text>
              <text class="attachment-size">{{ attachment.size }}</text>
            </view>
            <view class="download-btn">
              <text class="iconfont">&#xe6ef;</text>
            </view>
          </view>
        </view>
        
        <view v-if="message.type === '活动'" class="action-buttons">
          <view class="action-btn primary" @tap="respondToEvent('接受')">
            <text>接受邀请</text>
          </view>
          <view class="action-btn outline" @tap="respondToEvent('拒绝')">
            <text>婉拒</text>
          </view>
        </view>
        
        <view v-if="message.type === '订单'" class="action-buttons">
          <view class="action-btn primary" @tap="viewOrder">
            <text>查看详情</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 获取路由参数
const messageId = ref(null);

// 消息详情
const message = ref(null);
const loading = ref(true);

// 模拟消息数据
const mockMessages = [
  {
    id: 1,
    sender: '系统通知',
    title: '欢迎使用康怡之家',
    time: '2023-10-15 10:30',
    type: '系统',
    content: `<div style="line-height: 1.6;">
      <p>尊敬的用户，您好！</p>
      <p>欢迎加入康怡之家大家庭！我们致力于为您提供高品质的养老服务和贴心的关怀。</p>
      <p>在康怡之家，您可以：</p>
      <ul>
        <li>浏览各类养老院信息</li>
        <li>预约参观考察</li>
        <li>在线咨询专业人士</li>
        <li>了解养老政策和资讯</li>
        <li>分享养老心得和体验</li>
      </ul>
      <p>如您在使用过程中有任何问题，欢迎随时联系我们的客服团队。</p>
      <p>祝您使用愉快！</p>
      <p>康怡之家团队</p>
    </div>`
  },
  {
    id: 2,
    sender: '活动消息',
    title: '重阳节活动邀请',
    time: '2023-10-14 15:45',
    type: '活动',
    content: `<div style="line-height: 1.6;">
      <p>尊敬的用户，您好！</p>
      <p>值此重阳佳节来临之际，康怡之家诚挚邀请您参加我们举办的"敬老爱老，情暖金秋"主题活动。</p>
      <h3 style="color: #5d4037;">活动详情</h3>
      <p><strong>时间：</strong>2023年10月23日（周一）14:00-17:00</p>
      <p><strong>地点：</strong>阳光养老院中心花园</p>
      <p><strong>活动内容：</strong></p>
      <ul>
        <li>传统文化表演</li>
        <li>健康义诊咨询</li>
        <li>趣味游戏互动</li>
        <li>节日茶话会</li>
      </ul>
      <p>参加活动可获得康怡积分奖励，并有机会赢取精美礼品！</p>
      <p>请点击下方按钮确认是否参加，期待您的到来！</p>
      <p>康怡之家活动组</p>
    </div>`,
    hasAttachment: true,
    attachments: [
      {
        name: '重阳节活动详细日程.pdf',
        size: '1.2MB',
        url: 'https://example.com/schedule.pdf'
      },
      {
        name: '活动地点地图.jpg',
        size: '568KB',
        url: 'https://example.com/map.jpg'
      }
    ]
  },
  {
    id: 3,
    sender: '订单通知',
    title: '养老院参观预约确认',
    time: '2023-10-13 09:15',
    type: '订单',
    content: `<div style="line-height: 1.6;">
      <p>尊敬的用户，您好！</p>
      <p>您的养老院参观预约已确认，详情如下：</p>
      <div style="background: #f5f5f5; padding: 15px; border-radius: 8px; margin: 10px 0;">
        <p><strong>预约编号：</strong>VIS23101301</p>
        <p><strong>养老院：</strong>阳光养老院</p>
        <p><strong>参观时间：</strong>2023年10月16日 上午10:00</p>
        <p><strong>参观人数：</strong>2人</p>
        <p><strong>联系人：</strong>张先生</p>
        <p><strong>联系电话：</strong>138****5678</p>
      </div>
      <p>养老院工作人员将在您到访时提供专业的讲解和带领参观，请您准时到达。</p>
      <p>如需变更或取消预约，请提前24小时联系我们。</p>
      <p>期待您的到访！</p>
      <p>康怡之家客服中心</p>
    </div>`
  }
];

// 初始化页面
onMounted(() => {
  // 获取消息ID
  const query = uni.getSystemInfoSync().platform === 'devtools' ? 
    { id: '1' } : uni.$route.query;
  
  messageId.value = query.id;
  
  // 获取消息详情
  getMessageDetail();
});

// 获取消息详情 - 模拟API请求
const getMessageDetail = () => {
  loading.value = true;
  
  // 模拟网络请求延迟
  setTimeout(() => {
    const msg = mockMessages.find(m => m.id == messageId.value);
    message.value = msg;
    loading.value = false;
    
    // 消息标记为已读
    if (msg) {
      markAsRead(messageId.value);
    }
  }, 500);
};

// 标记消息为已读 - 模拟API请求
const markAsRead = (id) => {
  console.log('标记消息为已读:', id);
  // 实际应用中应调用API将消息标记为已读
};

// 查看附件
const viewAttachment = (attachment) => {
  console.log('查看附件:', attachment);
  uni.showToast({
    title: `正在查看: ${attachment.name}`,
    icon: 'none'
  });
};

// 响应活动邀请
const respondToEvent = (response) => {
  uni.showToast({
    title: `您${response}了此活动邀请`,
    icon: 'none'
  });
};

// 查看订单详情
const viewOrder = () => {
  const orderId = '230110001';
  uni.navigateTo({
    url: `/pages/order-detail/index?id=${orderId}`
  });
};

// 删除消息
const deleteMessage = () => {
  uni.showModal({
    title: '删除确认',
    content: '确定要删除此消息吗？删除后将无法恢复。',
    confirmColor: '#8d6e63',
    success: (res) => {
      if (res.confirm) {
        // 执行删除操作
        uni.showLoading({
          title: '删除中'
        });
        
        // 模拟删除请求
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 1500,
            success: () => {
              // 删除成功后返回列表页
              setTimeout(() => {
                goBack();
              }, 1500);
            }
          });
        }, 800);
      }
    }
  });
};

// 返回消息列表
const goToMessageList = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
page {
  background-color: #fff;
  height: 100%;
}

.message-detail-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
  // 顶部导航栏
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
    
    .back-btn, .right-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 20px;
        color: #8d6e63;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      
      text {
        font-size: 18px;
        font-weight: 600;
        color: #5d4037;
      }
    }
  }
  
  // 消息内容区域
  .message-content {
    flex: 1;
    
    .loading-state {
      padding: 50px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      
      text {
        color: #bcaaa4;
        font-size: 14px;
      }
    }
    
    .error-state {
      padding: 50px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .error-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(141, 110, 99, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        
        .iconfont {
          font-size: 30px;
          color: #8d6e63;
        }
      }
      
      .error-text {
        color: #5d4037;
        font-size: 16px;
        margin-bottom: 20px;
      }
      
      .back-to-list {
        background-color: rgba(141, 110, 99, 0.1);
        padding: 10px 20px;
        border-radius: 20px;
        
        text {
          color: #8d6e63;
          font-size: 14px;
        }
        
        &:active {
          background-color: rgba(141, 110, 99, 0.2);
        }
      }
    }
    
    .message-container {
      padding: 20px;
      
      .message-header {
        margin-bottom: 20px;
        
        .message-title {
          font-size: 18px;
          font-weight: 600;
          color: #5d4037;
          margin-bottom: 10px;
        }
        
        .message-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .sender {
            font-size: 14px;
            color: #8d6e63;
          }
          
          .time {
            font-size: 12px;
            color: #bcaaa4;
          }
        }
      }
      
      .message-body {
        padding: 10px 0;
        border-bottom: 1px solid rgba(141, 110, 99, 0.1);
        margin-bottom: 20px;
        
        rich-text {
          font-size: 15px;
          line-height: 1.6;
          color: #5d4037;
        }
      }
      
      .message-attachments {
        margin-bottom: 30px;
        
        .attachment-title {
          margin-bottom: 10px;
          
          text {
            font-size: 16px;
            font-weight: 600;
            color: #5d4037;
          }
        }
        
        .attachment-item {
          display: flex;
          align-items: center;
          padding: 12px 15px;
          background-color: #f5f5f5;
          border-radius: 8px;
          margin-bottom: 10px;
          
          &:active {
            background-color: rgba(141, 110, 99, 0.1);
          }
          
          .attachment-icon {
            width: 36px;
            height: 36px;
            background-color: #8d6e63;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            
            .iconfont {
              color: #fff;
              font-size: 20px;
            }
          }
          
          .attachment-info {
            flex: 1;
            overflow: hidden;
            
            .attachment-name {
              display: block;
              font-size: 14px;
              color: #5d4037;
              margin-bottom: 4px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .attachment-size {
              font-size: 12px;
              color: #bcaaa4;
            }
          }
          
          .download-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .iconfont {
              font-size: 20px;
              color: #8d6e63;
            }
          }
        }
      }
      
      .action-buttons {
        display: flex;
        margin-top: 20px;
        
        .action-btn {
          flex: 1;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 22px;
          margin: 0 10px;
          
          &:first-child {
            margin-left: 0;
          }
          
          &:last-child {
            margin-right: 0;
          }
          
          text {
            font-size: 15px;
          }
          
          &.primary {
            background-color: #8d6e63;
            
            text {
              color: #fff;
            }
            
            &:active {
              background-color: #5d4037;
            }
          }
          
          &.outline {
            border: 1px solid #8d6e63;
            
            text {
              color: #8d6e63;
            }
            
            &:active {
              background-color: rgba(141, 110, 99, 0.1);
            }
          }
        }
      }
    }
  }
}
</style> 